<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <!-- 
        v-model指令:
          v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定
          双向数据绑定:1.表单的值由v-model接收的数据决定,2.当表单内部的值发生修改的时候,v-model对应的数据也会发生修改
          v-model的主要作用就是用来收集表单数据!!!!
        -->
    <div id="app">
        <!-- v-model在普通输入框的基础使用 -->
        <form action="###">
            <p>请输入用户名: <input type="text" v-model="username" /></p>
            <p>请输入密码: <input type="password" v-model="password" /></p>
        </form>
    </div>
</body>

</html>
<script src="../../../vue.js"></script>
<script>
    Vue.config.productionTip = false;

    const vm = new Vue({
        el: "#app",
        data() {
            return {
                username: "laowang",
                password: "",
            };
        },
    });
</script>